<template>
  <div class="app-container">
    <el-form
      :model="classQuery"
      ref="classQueryRef"
      :inline="true"
      class="globalSerchFormStyle"
      label-width="80px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="分类名称" prop="className">
            <el-input
              v-model="classQuery.className"
              placeholder="请输入分类名称"
              clearable
              size="small"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间" prop="dateRange">
            <el-date-picker
              v-model="classQuery.dateRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="small"
              style="width: 190px"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="10" class="global_el_rowStyle">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getNonOilCategoryTree"
        >
          搜索
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh" size="mini" plain @click="resetQuery">
          重置
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-plus"
          size="mini"
          plain
          @click="gotoAddOrEditClass('add', {})"
        >
          添加分类
        </el-button>
      </el-col>
      <el-col :span="1.5" v-show="currentSelectList.length > 0">
        <el-button
          icon="el-icon-delete"
          size="mini"
          plain
          @click="deleteNonOilClassDialogVisible = true"
        >
          批量删除
        </el-button>
      </el-col>
    </el-row>

    <!-- table -->
    <el-table
      v-loading="loading"
      :data="classTableDataList"
      row-key="categoryId"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      @selection-change="handleSelectNonOilList"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="55" label="序号"> </el-table-column>
      <el-table-column
        prop="categoryName"
        label="分类名称"
        :show-overflow-tooltip="true"
        width="160"
      ></el-table-column>
      <el-table-column label="创建时间" align="left" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="left"
        class-name="small-padding fixed-width"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="gotoAddOrEditClass('edit', scope.row)"
            >编辑</el-button
          >

          <el-button
            size="mini"
            type="text"
            @click="gotoAddOrEditClass('detail', scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--  添加、编辑分类 -->
    <NonOilAddOrEditClass
      :addOrEditNonOilDialog.sync="addOrEditNonOilDialog"
      :title="nonOilTitle"
      :allCategoryListOption="allCategoryListOption"
      :currentCategoryInfo="currentCategoryInfo"
      @reloadDate="getNonOilCategoryTree"
    >
    </NonOilAddOrEditClass>

    <!-- 删除 -->
    <el-dialog
      title="提示"
      :visible.sync="deleteNonOilClassDialogVisible"
      width="30%"
    >
      <span>确定删除所选分类？此操作会删除所选分类以及其所有子分类</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteNonOilClassDialogVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="handleDeleteNonOil">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getNonOilCategoryTreeApi,
  deleteNonOilCategoryApi,
} from "@/api/nonOil/class";
import NonOilAddOrEditClass from "./nonOil_addOrEditClass.vue";
import { cloneDeep } from "lodash";
export default {
  name: "NonOilClass",
  components: { NonOilAddOrEditClass },
  data() {
    return {
      classQuery: {
        className: "",
        dateRange: [],
      },
      classTableDataList: [],
      allCategoryListOption: [],
      addOrEditNonOilDialog: false, // 添加编辑弹框
      nonOilTitle: "新增分类",
      loading: false,
      currentCategoryInfo: {}, //当前需要编辑的分类信息对象
      currentSelectList: {}, // 当前选中行列表
      deleteNonOilClassDialogVisible: false,
    };
  },
  created() {
    this.getNonOilCategoryTree();
  },
  methods: {
    // 重置
    resetQuery() {
      this.resetForm("classQueryRef");
      this.getNonOilCategoryTree();
    },
    // 获取非油品分类树
    async getNonOilCategoryTree() {
      this.loading = true;
      const parmams = {
        categoryName: this.classQuery.className,
      };
      if (this.classQuery.dateRange && this.classQuery.dateRange.length) {
        parmams.beginTime = this.classQuery.dateRange[0];
        parmams.endTime = this.classQuery.dateRange[1];
      }
      const res = await getNonOilCategoryTreeApi(parmams);
      this.allCategoryListOption = this.handleTree([res.data], "categoryId"); // 新增或编辑表单上级分类数据
      if (res.data.children && res.data.children.length) {
        // 对数据进行处理。添加categoryId字段，用来table的row-key的渲染
        this.classTableDataList = this.handleTree(
          res.data.children,
          "categoryId"
        );
      } else {
        this.classTableDataList = [];
      }
      this.loading = false;
    },
    // 去添加或编辑分类
    gotoAddOrEditClass(type, row) {
      const operation = {
        add: "新增分类",
        edit: "编辑分类",
        detail: "查看分类",
      };
      this.currentCategoryInfo = cloneDeep(row);
      this.nonOilTitle = operation[type];
      this.addOrEditNonOilDialog = true;
    },

    // 选中行
    handleSelectNonOilList(val) {
      this.currentSelectList = val;
    },

    // 批量删除分类
    async handleDeleteNonOil() {
      const categoryIds = this.currentSelectList.map((item) => item.categoryId);
      const res = await deleteNonOilCategoryApi(categoryIds);
      this.msgSuccess("删除成功");
      this.deleteNonOilClassDialogVisible = false;
      this.getNonOilCategoryTree();
    },
  },
};
</script>
<style scoped lang="scss"></style>
